<!--
 * @description: 信息 预测结果
 * @author: cuicui
 * @Date: 2023-11-23 11:55:06
 * @LastEditTime: 2023-11-23 14:17:10
 * @LastEditors: cuicui
-->
<template>
  <business-layout title='历史数据' custom-title>
    <div style='height: 100%;'>
      <div style='height: 100%;'>
        <div style='height: 10%'>
          <a-row>
            <a-form :form='form' layout='inline' @submit='handleQueryData'>
              <!--              <a-form-item>-->
              <!--                <h3>太阳能集热器制热功率预测</h3>-->
              <!--              </a-form-item>-->
              <a-form-item>
                <a-select style='width: 240px;' placeholder='请选择' @change='' v-decorator="['linkId']"
                          :options='selectList'>
                </a-select>
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker showTime v-decorator="['startTime' ]" valueFormat='YYYY-MM-DD HH:mm:ss'
                               :disabled-date='startDisabledDate' />
              </a-form-item>
              <a-form-item label=''>
                <a-date-picker showTime v-decorator="['endTime']" valueFormat='YYYY-MM-DD HH:mm:ss'
                               :disabled-date='endDisabledDate' />
              </a-form-item>
              <a-form-item>
                <a-button type='primary' html-type='submit'>
                  <a-icon type='search' />
                  查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-row>
        </div>
        <div style='height: 90%'>
          <line-chart
            multiple
            v-show='xData.length'
            :unit='unit'
            :legendList='legendList'
            :loading='loading'
            height='100%'
            width='100%'
            :id='"line-person-env"'
            :x-data='xData'
            :y-data='yData'
          />
          <a-empty style='height: 100%' v-show='!xData.length'></a-empty>
        </div>
      </div>

    </div>
  </business-layout>
</template>

<script>
import { LineChart, BarChart } from '@/business-components/charts'
import CreateChart from '@/business-components/create-chart/index.vue'
import CreateTab from '@/business-components/create-tab/index.vue'
import HistoryChartItem from '@/business-components/history-chart-item/index.vue'
import CreatePoint from '@/business-components/create-point/index.vue'
import { getDeviceReliablilityLink, getDeviceReliablilityGraphData } from '@/api/customReport'
import moment from 'moment/moment'

const pageType = 'history'
let mark = 0
export default {
  name: 'HistoryTime',
  mixins: [],
  components: {
    CreatePoint,
    CreateTab,
    LineChart,
    BarChart,
    CreateChart,
    HistoryChartItem
  },
  props: {},
  watch: {
    activeKey(val) {
      if (val) {
        this.findAllReportByPageId()
      }
    }
  },
  computed: {},
  data() {
    this.pageType = pageType
    return {
      activeKey: '',
      form: this.$form.createForm(this),
      selectList: [],
      menuId: '',
      myBarChart: null,
      barSpinning: true,
      visible: false,
      loading: false,
      mdl: null,
      historyTimeModel: null,
      tabs: [],
      yData: [],
      xData: [],
      legendList: [
        {
          name: '计算值'
        },
        {
          name: '实际数据'
        }
      ],
      unit: '',
      historyVisible: false,
      confirmLoading: false,
      reportList: []
    }
  },
  created() {
    this.getDeviceReliablilityLink()
  },
  methods: {
    moment,
    startDisabledDate(startValue) {
      const endValue = this.form.getFieldValue('endTime')
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > moment(endValue).valueOf()
    },
    endDisabledDate(endValue) {
      const startValue = this.form.getFieldValue('startTime')
      if (!startValue || !endValue) {
        return false
      }
      return moment(startValue).valueOf() >= endValue.valueOf()
    },
    getDeviceReliablilityLink() {
      getDeviceReliablilityLink().then(res => {
        this.selectList = res.map(item => {
          return {
            ...item,
            key: item.linkId,
            label: item.linkName
          }
        })
        if (this.selectList1 && this.selectList1.length) {
          this.form.setFieldsValue({
            'linkId': this.selectList[0].key
          })
        }
        this.handleQueryData()
      })
    },
    handleQueryData(e) {
      e.preventDefault()
      this.loading = true
      const that = this
      const values = this.form.getFieldsValue(['linkId', 'startTime', 'endTime'])
      if (!values.linkId) {
        this.loading = false
        return
      }
      getDeviceReliablilityGraphData({
        ...values
      }).then(res => {
        const { dataItems, unit } = res
        this.unit = unit
        if (dataItems) {
          that.yData = [
            dataItems.map(item => item.forecastValue ? Number(item.forecastValue).toFixed(2) : 0),
            dataItems.map(item => item.loadValue ? Number(item.loadValue).toFixed(2) : 0)
          ]
          that.xData = dataItems.map(item => item.time) || []
        } else {
          that.yData = []
          that.xData = []
        }
      })
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
  }
}
</script>
<style lang='less' scoped>
h3 {
  color: rgb(54, 97, 184);
  font-weight: bold;
  font-size: 24px;
}
</style>